<template>
  <page-header-wrapper>
    <a-card style="margin-bottom: 10px">
      <a-steps class="steps" :current="currentTab">
        <a-step title="填写订单信息" />
        <a-step title="确认订单信息" />
        <a-step title="完成" />
      </a-steps>
    </a-card>
    <div class="content">
      <saleStep1 v-if="currentTab === 0" @nextStep="nextStep"/>
      <saleStep2 v-if="currentTab === 1" :picked="picked" @nextStep="nextStep" @prevStep="prevStep"/>
      <saleStep3 v-if="currentTab === 2" :saleCode="saleCode" @prevStep="prevStep" @finish="finish"/>
    </div>
  </page-header-wrapper>
</template>

<script>
import saleStep1 from './components/saleStep1'
import saleStep2 from './components/saleStep2'
import saleStep3 from './components/saleStep3'
import storage from 'store'

export default {
  name: 'SaleAdd',
  components: {
    saleStep1,
    saleStep2,
    saleStep3
  },
  data () {
    return {
      currentTab: 0,
      saleCode: null,
      picked: false
    }
  },
  created () {
    if (this.$route.params.sale) {
      this.saleCode = this.$route.params.sale
      this.currentTab = 2
    }
  },
  methods: {
    nextStep (saleCode) {
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
      if (this.currentTab === 2) {
        this.saleCode = saleCode
        storage.remove('saleDetail')
      }
    },
    prevStep () {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
      if (this.currentTab === 1) {
        this.picked = true
      }
    },
    finish () {
      storage.remove('saleDetail')
      this.currentTab = 0
    }
  },
  beforeRouteLeave (to, from, next) {
    storage.remove('saleDetail')
    next()
  }
}
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>
